import React, { useState } from 'react';
import { Button, message, Input } from 'antd';
import { FolderOutlined, UploadOutlined } from '@ant-design/icons';
import './index.scss';
import BackBtn from '@components/globalComponents/BackBtn';

function SplitPdfFC() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [outputPath, setOutputPath] = useState<string | null>(null);
  const [startPage, setStartPage] = useState<number | null>(null);
  const [endPage, setEndPage] = useState<number | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { files } = e.target;
    if (files && files.length > 0) {
      const file = files[0];
      // 检查文件类型是否为 PDF
      if (file.type === 'application/pdf') {
        setSelectedFile(file);
        message.success('文件选择成功');
      } else {
        message.error('请选择 PDF 文件');
        setSelectedFile(null);
      }
    }
  };

  const handleStartPageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value, 10);
    if (!Number.isNaN(value) && value > 0) {
      setStartPage(value);
    } else {
      setStartPage(null);
      message.error('请输入有效的起始页码');
    }
  };

  const handleEndPageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value, 10);
    if (!Number.isNaN(value) && value > 0) {
      // 使用 Number.isNaN 替换 isNaN
      setEndPage(value);
    } else {
      setEndPage(null);
      message.error('请输入有效的结束页码');
    }
  };

  const handleSplit = () => {
    if (selectedFile) {
      if (startPage && endPage) {
        if (startPage <= endPage) {
          // 这里可以实现上传逻辑，比如使用 fetch 或 axios 上传到服务器
          // 示例：打印文件信息和页码范围
          console.log('准备上传的文件:', selectedFile.name);
          console.log('准备上传的文件 路径:', selectedFile.path);
          console.log('起始页码:', startPage);

          window.electronAPI.splitPdfByPageNo({
            inputFilePath: selectedFile.path,
            outputFilePath: outputPath,
            startPage,
            endPage,
          });
        } else {
          message.error('起始页码不能大于结束页码');
        }
      } else {
        message.warning('请输入有效的起始页码和结束页码');
      }
    } else {
      message.warning('请先选择 PDF 文件');
    }
  };

  const handleSelectFolder = async () => {
    const dirPath = await window.electronAPI.openDirDialog({});
    setOutputPath(dirPath);
  };

  return (
    <div className="split-pdf-wrapper">
      <div>
        <BackBtn />
      </div>
      <input
        type="file"
        accept=".pdf"
        style={{ display: 'none' }}
        id="pdf-upload-input"
        onChange={handleFileChange}
      />

      <Button
        icon={<UploadOutlined />}
        onClick={() => document.getElementById('pdf-upload-input')?.click()}
      >
        选择 PDF 文件
      </Button>
      <Input
        style={{ width: 100, marginLeft: 10 }}
        placeholder="起始页码"
        onChange={handleStartPageChange}
      />
      <Input
        style={{ width: 100, marginLeft: 10 }}
        placeholder="结束页码"
        onChange={handleEndPageChange}
      />

      <Button style={{ marginLeft: 10 }} onClick={handleSplit}>
        确认拆分
      </Button>
      <div>{selectedFile && <p>已选择文件: {selectedFile.name}</p>}</div>
      <div>
        <Button icon={<FolderOutlined />} onClick={handleSelectFolder}>
          选择文件夹
        </Button>
        <p>输出路径: {outputPath}</p>
      </div>
    </div>
  );
}

export default SplitPdfFC;
